<script setup lang="ts">
defineOptions({
  name: "deviceStatisticsTodayTasks"
});

import { ref, onMounted } from "vue";
import deviceStatisticsTasks from "../components/deviceStatisticsTasks.vue";
import { queryDeviceStatistics } from "@/api/modules/operation";

const deviceStatisticsTasksRef = ref<InstanceType<typeof deviceStatisticsTasks> | null>(null);
// 数据  设备状态 + 今日任务
const deviceStatisticsQueryData = ref<any>(null);

// 获取数据  设备状态 + 今日任务 + 今日告警
const queryDeviceStatisticsFn = async () => {
  const params = { classCode: "GAS" };
  const res = await queryDeviceStatistics(params, () => {});
  if (res) {
    deviceStatisticsQueryData.value = res;
  }
};

const initLoading = () => {
  deviceStatisticsTasksRef.value.initLoading();
};

onMounted(async () => {
  initLoading();
  // 获取数据  设备状态 + 今日任务 + 今日告警
  queryDeviceStatisticsFn().then(async () => {
    await deviceStatisticsTasksRef.value?.init();
    deviceStatisticsTasksRef.value.loadingInstance.close();
  });
});
</script>

<template>
  <div class="gas-overview-item">
    <deviceStatisticsTasks ref="deviceStatisticsTasksRef" title="气化科今日任务" :query-data="deviceStatisticsQueryData" />
  </div>
</template>

<style lang="scss" scoped>
.gas-overview-item {
  width: 100%;
  height: 100%;
}
</style>
